<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            ul,
            li {
                list-style: none;
            }

            li {
                display: flex;
                justify-content: space-around;
            }

            .item_img {
                width: 25%;
            }

            .item_img img {
                width: 90%;
            }

            .item_text {
                width: 50%;
            }

            .item_btn {
                width: 25%;
                justify-content: center;
                align-content: center;
            }

            .item_btn div {
                width: 60px;
                height: 30px;
                background: orangered;
                text-align: center;
                line-height: 30px;
                margin-top: 30px;
                color: #fff;
                border-radius: 15px;
            }

            .item_nm {
                font-size: 17px;
                margin-bottom: 0.267rem;
            }

            .item_sc, .item_wish {
                font-size: 15px;
            }

            .item_sc span:nth-child(1) {
                color: #666666;
            }

            .item_sc span:nth-child(2) {
                color: #FAAF00;
                font-weight: bold;
                font-size: 17px;
            }

            .item_wish span:nth-child(1) {
                color: #FAAF00;
                font-weight: bold;
                font-size: 17px;
            }

            .item_wish span:nth-child(2) {
                color: #666666;
            }

            .item_desc {
                margin-top: 0.32rem;
                color: #666666;
                font-size: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .item_showInfo {
                margin-top: 0.32rem;
                color: #666666;
                font-size: 15px;
            }

            img{
                width: 100%;
            }
            .header{
                width: 100vw;
                height: 40px;
                position: fixed;
                top: 0;
            }
            .content{
                overflow-y:scroll ;
            }
            .footer{
                width: 100vw;
                position: fixed;
                bottom: -1px;
            }
            .footer img{
                width: 100vw;
                height: 100%;
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <myheader></myheader>
            <mycontent :list="list"></mycontent>
            <myfooter></myfooter>
        </div>

        <script src="./js/vue.js"></script>
        <script src="./js/axios.min.js"></script>
        <script>
            var myheader = {
                template: `<div class="header">
                                <img src="img/header.png" alt="">
                            </div>`
            }
            var mycontent = {
                props: ["list"],
                template:
                        `
                          <div class="content">
                          <ul>
                            <li v-for="item in list" :key="item.id">
                              <div class="item_img"><img :src="item.img"/></div>
                              <div class="item_text">
                                <div class="item_nm"><b>{{ item.nm }}</b></div>
                                <div class="item_sc" v-show="item.sc"><span>观众评</span><span>{{ item.sc }}</span></div>
                                <div class="item_wish" v-show="!item.sc"><span>{{ item.wish }}</span><span>人想看</span>
                                </div>
                                <div class="item_desc">{{ item.desc }}</div>
                                <div class="item_showInfo">{{ item.showInfo }}</div>
                              </div>
                              <div class="item_btn">
                                <div :style="{background:item.showStateButton.color}">
                                  {{ item.showStateButton.content }}
                                </div>
                              </div>
                            </li>
                          </ul>
                          </div>`

            }
            var myfooter = {
                template: `<div class="footer">
                                <img src="img/1.png" alt="">
                            </div>`
            }
            var app = new Vue({
                el: "#app",
                data: {
                    list: []//接收数据
                },
                //获取数据可以在 created \ beforeMount \ mounted 钩子函数中
                mounted() {
                    axios.get("./json/film.json").then(res => {

                        console.log(res);
                        this.list = res.data.data.hot;
                    });
                },
                components: {
                    myheader, mycontent, myfooter
                }
            })

        </script>
    </body>

</html>